<a class="back"  [routerLink]="['/index']" style="position: fixed;left: 10px;top: 10px;z-index: 999;">
    <i class="icon icon-返回"></i>
    返回
</a>
<div
    style="background-color:#fff;display: flex;justify-content: center;align-items: center;margin: 0 auto;overflow: auto"
    [style.width.px]="projectParmas.width"
    [style.height.px]="projectParmas.height">
    <div class="code"
         *ngIf="componentList.length === 0 && gList.length === 0 && goldResult.length === 0 && pickList.length === 0 && !devoteShow && start">
        <div class="code-logo">
            <img src="./assets/img/code-logo.png" alt="">
        </div>
        <ngx-qrcode
            [qrc-value] = "value"
            qrc-class = "aclass"
            qrc-errorCorrectionLevel = "L">
        </ngx-qrcode>
    </div>
    <div *ngIf="gList.length > 0" class="group-box">
        <div class="group" *ngFor="let data of gList">
            <p class="img-name">
                <img [src]="data.img ? this.http.IP_PORT + data.img : './assets/img/default-img.png'" alt="">
                {{data.text}}
            </p>
            <div class="group-info">
                <div>
                    <img src="./assets/img/group-icon-1.png">总人数<br/>
                    <span>{{data.limit}}</span>
                </div>
                <div>
                    <img src="./assets/img/group-icon-2.png">当前人数<br/>
                    <span>{{data.num}}</span>
                </div>
            </div>
        </div>
    </div>
    <div *ngIf="componentList.length > 0" class="preview">
        <div class="scene-center" style="background: #fff">
            <ng-container *ngFor="let data of componentList; let i = index;">
                <div class="c-txt"

                     *ngIf="data.name == 'txt'"
                     [style.left.px]="data.style.x"
                     [style.top.px]="data.style.y"
                     [style.width.px]="data.style.width"
                     [style.height.px]="data.style.height"
                     [style.color]="data.style.color"
                     [style.background]="data.style.background"
                     [style.justifyContent]="data.style.justifyContent"
                     [style.alignItems]="data.style.alignItems"
                     [style.fontFamily]="data.style.fontFamily"
                     [style.fontSize.px]="data.style.fontSize"
                     [style.textDecoration]="data.style.textDecoration"
                     [style.fontStyle]="data.style.fontStyle"
                     [style.fontWeight]="data.style.fontWeight"
                >
                    <app-c-txt
                        [data]="data.data"
                    ></app-c-txt>
                </div>
                <div class="c-img"
                     *ngIf="data.name == 'img'"

                     [style.left.px]="data.style.x"
                     [style.top.px]="data.style.y"
                     [style.width.px]="data.style.width"
                     [style.height.px]="data.style.height"
                     [style.color]="data.style.color"
                     [style.background]="data.style.background"
                     [style.justifyContent]="data.style.justifyContent"
                     [style.alignItems]="data.style.alignItems"
                     [style.fontFamily]="data.style.fontFamily"
                     [style.fontSize.px]="data.style.fontSize"
                     [style.textDecoration]="data.style.textDecoration"
                     [style.fontStyle]="data.style.fontStyle"
                     [style.fontWeight]="data.style.fontWeight"
                >
                    <app-c-img
                        [src]="data.data.src"
                    ></app-c-img>
                </div>
                <div class="c-web"
                     *ngIf="data.name == 'SG_web'"
                     [style.left.px]="data.style.x"
                     [style.top.px]="data.style.y"
                     [style.width.px]="data.style.width"
                     [style.height.px]="data.style.height"
                >
                    <app-c-web
                        [data]="data.data"
                    ></app-c-web>
                </div>
                <div class="c-pdf"
                     *ngIf="data.name == 'pdf'"
                     [style.left.px]="data.style.x"
                     [style.top.px]="data.style.y"
                     [style.width.px]="data.style.width"
                     [style.height.px]="data.style.height"
                     [style.color]="data.style.color"
                     [style.background]="data.style.background"
                     [style.justifyContent]="data.style.justifyContent"
                     [style.alignItems]="data.style.alignItems"
                     [style.fontFamily]="data.style.fontFamily"
                     [style.fontSize.px]="data.style.fontSize"
                     [style.textDecoration]="data.style.textDecoration"
                     [style.fontStyle]="data.style.fontStyle"
                     [style.fontWeight]="data.style.fontWeight"
                >
                    <app-c-pdf
                        [src]="data.data.src"
                    ></app-c-pdf>
                </div>
                <div class="c-video"
                     *ngIf="data.name == 'video'"
                     [style.left.px]="data.style.x"
                     [style.top.px]="data.style.y"
                     [style.width.px]="data.style.width"
                     [style.height.px]="data.style.height"
                     [style.color]="data.style.color"
                     [style.background]="data.style.background"
                     [style.justifyContent]="data.style.justifyContent"
                     [style.alignItems]="data.style.alignItems"
                     [style.fontFamily]="data.style.fontFamily"
                     [style.fontSize.px]="data.style.fontSize"
                     [style.textDecoration]="data.style.textDecoration"
                     [style.fontStyle]="data.style.fontStyle"
                     [style.fontWeight]="data.style.fontWeight"
                >
                    <app-c-video
                        [src]="data.data.src"
                        [control]="control"
                        [controls]="true"
                    ></app-c-video>
                </div>
                <div class="c-audio"
                     *ngIf="data.name == 'audio'"
                     [style.left.px]="data.style.x"
                     [style.top.px]="data.style.y"
                     [style.width.px]="data.style.width"
                     [style.height.px]="data.style.height"
                     [style.color]="data.style.color"
                     [style.background]="data.style.background"
                     [style.justifyContent]="data.style.justifyContent"
                     [style.alignItems]="data.style.alignItems"
                     [style.fontFamily]="data.style.fontFamily"
                     [style.fontSize.px]="data.style.fontSize"
                     [style.textDecoration]="data.style.textDecoration"
                     [style.fontStyle]="data.style.fontStyle"
                     [style.fontWeight]="data.style.fontWeight"
                >
                    <app-c-audio
                        [src]="data.data.src"
                        [control] = "control"
                    ></app-c-audio>
                </div>
                <div class="c-button"
                     *ngIf="data.name == 'button'"
                     [style.left.px]="data.style.x"
                     [style.top.px]="data.style.y"
                     [style.width.px]="data.style.width"
                     [style.height.px]="data.style.height"
                     [style.color]="data.style.color"
                     [style.background]="data.style.background"
                     [style.justifyContent]="data.style.justifyContent"
                     [style.alignItems]="data.style.alignItems"
                     [style.fontFamily]="data.style.fontFamily"
                     [style.fontSize.px]="data.style.fontSize"
                     [style.textDecoration]="data.style.textDecoration"
                     [style.fontStyle]="data.style.fontStyle"
                     [style.fontWeight]="data.style.fontWeight"
                >
                    <app-c-button
                        [data]="data.data"
                    ></app-c-button>
                </div>
                <div class="c-select"
                     *ngIf="data.name == 'SG_select'"
                     [style.left.px]="data.style.x"
                     [style.top.px]="data.style.y"
                     [style.width.px]="data.style.width"
                     [style.height.px]="data.style.height"
                     [style.color]="data.style.color"
                     [style.background]="data.style.background"
                     [style.justifyContent]="data.style.justifyContent"
                     [style.alignItems]="data.style.alignItems"
                     [style.fontFamily]="data.style.fontFamily"
                     [style.fontSize.px]="data.style.fontSize"
                     [style.textDecoration]="data.style.textDecoration"
                     [style.fontStyle]="data.style.fontStyle"
                     [style.fontWeight]="data.style.fontWeight"
                >
                    <app-c-select
                        [data]="data.data"
                    ></app-c-select>
                </div>

                <div class="c-judgement"
                     *ngIf="data.name == 'SG_judgement'"
                     [style.left.px]="data.style.x"
                     [style.top.px]="data.style.y"
                     [style.width.px]="data.style.width"
                     [style.height.px]="data.style.height"
                     [style.color]="data.style.color"
                     [style.background]="data.style.background"
                     [style.justifyContent]="data.style.justifyContent"
                     [style.alignItems]="data.style.alignItems"
                     [style.fontFamily]="data.style.fontFamily"
                     [style.fontSize.px]="data.style.fontSize"
                     [style.textDecoration]="data.style.textDecoration"
                     [style.fontStyle]="data.style.fontStyle"
                     [style.fontWeight]="data.style.fontWeight"
                >
                    <app-c-judgement
                        [data]="data.data"
                    ></app-c-judgement>
                </div>
                <div class="c-vote"
                     *ngIf="data.name == 'SG_vote'"
                     [style.left.px]="data.style.x"
                     [style.top.px]="data.style.y"
                     [style.width.px]="data.style.width"
                     [style.height.px]="data.style.height"
                     [style.color]="data.style.color"
                     [style.background]="data.style.background"
                     [style.justifyContent]="data.style.justifyContent"
                     [style.alignItems]="data.style.alignItems"
                     [style.fontFamily]="data.style.fontFamily"
                     [style.fontSize.px]="data.style.fontSize"
                     [style.textDecoration]="data.style.textDecoration"
                     [style.fontStyle]="data.style.fontStyle"
                     [style.fontWeight]="data.style.fontWeight"
                >
                    <app-c-vote
                        [data]="data.data"
                    ></app-c-vote>
                </div>
                <div class="c-checkbox"
                     *ngIf="data.name == 'SG_checkbox'"
                     [style.left.px]="data.style.x"
                     [style.top.px]="data.style.y"
                     [style.width.px]="data.style.width"
                     [style.height.px]="data.style.height"
                     [style.color]="data.style.color"
                     [style.background]="data.style.background"
                     [style.justifyContent]="data.style.justifyContent"
                     [style.alignItems]="data.style.alignItems"
                     [style.fontFamily]="data.style.fontFamily"
                     [style.fontSize.px]="data.style.fontSize"
                     [style.textDecoration]="data.style.textDecoration"
                     [style.fontStyle]="data.style.fontStyle"
                     [style.fontWeight]="data.style.fontWeight"
                >
                    <app-c-checkbox
                        [data]="data.data"
                    ></app-c-checkbox>
                </div>
                <div class="c-sgaudio"
                     *ngIf="data.name == 'SG_audio'"
                     [style.left.px]="data.style.x"
                     [style.top.px]="data.style.y"
                     [style.width.px]="data.style.width"
                     [style.height.px]="data.style.height"
                     [style.color]="data.style.color"
                     [style.background]="data.style.background"
                     [style.justifyContent]="data.style.justifyContent"
                     [style.alignItems]="data.style.alignItems"
                     [style.fontFamily]="data.style.fontFamily"
                     [style.fontSize.px]="data.style.fontSize"
                     [style.textDecoration]="data.style.textDecoration"
                     [style.fontStyle]="data.style.fontStyle"
                     [style.fontWeight]="data.style.fontWeight"
                >
                    <app-c-sgaudio
                        [data]="data.data"
                    ></app-c-sgaudio>
                </div>
                <div class="c-mindmap"
                     *ngIf="data.name == 'SG_mindmap'"

                >
                    <app-c-mindmap
                        [width]="projectParmas.width"
                        [height]="projectParmas.height"
                        [appAutoScale]="projectParmas"
                        [showtree]="true"
                        [data]="data.data"
                    ></app-c-mindmap>
                </div>
                <div class="c-tieba"
                     *ngIf="data.name == 'SG_tieba'"
                >
                    <app-c-tieba
                        [IPPORT]="IP"
                        [appAutoScale]="projectParmas"
                        [data]="data.data"
                        [answerList]="answerList"
                    ></app-c-tieba>
                </div>
                <div class="c-weibo"
                     *ngIf="data.name == 'SG_weibo'"
                >
                    <app-c-weibo
                        [IPPORT]="IP"
                        [appAutoScale]="projectParmas"
                        [data]="data.data"
                        [answerList]="answerList"
                    ></app-c-weibo>
                </div>
                <div class="c-qq"
                     *ngIf="data.name == 'SG_QQ'"
                >
                    <app-c-qq
                        [appAutoScale]="projectParmas"
                        [IPPORT]="IP"
                        [data]="data.data"
                        [answerList]="answerList"
                    ></app-c-qq>
                </div>
                <div class="c-brain"
                     *ngIf="data.name == 'SG_brain'"
                >
                    <app-c-brain
                        [appAutoScale]="projectParmas"
                        style="transform-origin: 0 0"
                        [IPPORT] = "IP"
                        [data]="data.data"
                        [socket]="true"
                        [goldObj]="goldObj"
                        [answerList]="answerList"

                    ></app-c-brain>
                </div>
                <div class="c-brain"
                     *ngIf="data.name == 'SG_infoext'"
                >
                    <app-c-braininfo
                        [appAutoScale]="projectParmas"
                        style="transform-origin: 0 0"
                        [IPPORT] = "IP"
                        [data]="data"
                        [socket]="true"
                        [isScreen]="true"
                        [goldObj]="goldObj"
                        [answerList]="answerList"
                        [sim_id] = 'sim_id'
                    ></app-c-braininfo>
                </div>
                <div class="c-turns-speak"
                     *ngIf="data.name == 'SG_turns_speak'"
                >
                    <app-c-sixhats
                        [appAutoScale]="projectParmas"
                        style="transform-origin: 0 0"
                        [IPPORT] = "IP"
                        [data]="data.data"
                        [socket]="true"
                        [goldObj]="goldObj"
                        [answerList]="answerList"
                        [isTp]="false"
                        [talkGroup]="talkgroup"
                        [selectShow] = "selectshow"
                        [curr_index]="currindex"
                    ></app-c-sixhats>
                </div>

                <div class="c-special-battle"
                     *ngIf="data.name == 'SG_special_battle'"
                >
                    <app-c-special-battle
                        [appAutoScale]="projectParmas"
                        style="transform-origin: 0 0"
                        [IPPORT] = "IP"
                        [data]="data.data"
                        [socket]="true"
                        [goldObj]="goldObj"
                        [answerList]="answerList"
                    ></app-c-special-battle>
                </div>

                <div class="c-braingroup"
                     *ngIf="data.name == 'SG_tnfbgroup'"
                >
                    <app-c-braingroup
                        [appAutoScale]="projectParmas"
                        style="transform-origin: 0 0"
                        [IPPORT]="IP"
                        [isFullscreen]="false"
                        [data]="data.data"
                        [socket]="true"
                        [goldObj]="goldObj"
                        [answerList]="answerList"
                    ></app-c-braingroup>
                </div>
                <div class="c-subjective"
                     *ngIf="data.name == 'SG_subjective'"
                >
                    <app-c-subjective
                        [appAutoScale]="projectParmas"
                        style="transform-origin: 0 0"
                        [IPPORT]="IP"
                        [data]="data.data"
                        [socket]="true"
                        [goldObj]="goldObj"
                        [showAnwser]="false"
                        [answerList]="answerList"
                    ></app-c-subjective>
                </div>
                <div class="c-causal"
                     *ngIf="data.name == 'SG_causal'"
                >
                    <app-c-causal
                        [appAutoScale]="projectParmas"
                        style="transform-origin: 0 0"
                        [IPPORT]="IP"
                        [data]="data.data"
                        [socket]="true"
                        [goldObj]="goldObj"
                        [showAnwser]="false"
                        [answerList]="answerList"
                    ></app-c-causal>
                </div>
                <div class="c-guess"
                     *ngIf="data.name == 'SG_guess'"
                >
                    <app-c-guess
                        [appAutoScale]="projectParmas"
                        style="transform-origin: 0 0"
                        [IPPORT]="IP"
                        [guesskey]="guesskey"
                        [data]="data.data"
                        [socket]="true"
                        [goldObj]="goldObj"
                        [showAnwser]="false"
                        [answerList]="answerList"
                    ></app-c-guess>
                </div>
                <!--六顶思考帽-->
                <div class="c-brain"
                     *ngIf="data.name == 'SG_sixHat'"
                >
                    <app-c-six-hat
                        [appAutoScale]="projectParmas"
                        style="transform-origin: 0 0"
                        [IPPORT]="IP"
                        [sixScore] = "sixScore"
                        [sixScoreList]="sixScoreList"
                        [data]="data.data"
                        [socket]="true"
                        [goldObj]="goldObj"
                        [answerList]="sixAnswerList"
                    ></app-c-six-hat>
                </div>

                <div class="c-seek"
                     *ngIf="data.name == 'SG_seek'"
                >
                    <app-c-seek
                        [appAutoScale]="projectParmas"
                        style="transform-origin: 0 0"
                        [IPPORT]="IP"
                        [guesskey]="guesskey"
                        [data]="data.data"
                        [socket]="true"
                        [goldObj]="goldObj"
                        [showAnwser]="false"
                        [answerList]="answerList"
                    ></app-c-seek>
                </div>
                <div class="c-bullet"
                     *ngIf="data.name == 'SG_bullet'"
                     style="z-index: 9999;"
                     [style.left.px]="data.style.x"
                     [style.top.px]="data.style.y"
                     [style.width.px]="data.style.width"
                     [style.height.px]="data.style.height"
                >
                    <app-c-bullet
                        [data]="data.data"
                        [answerList]="answerList"
                        [height]="data.style.height"
                    ></app-c-bullet>
                </div>
            </ng-container>
        </div>
    </div>
    <div *ngIf="goldResult.length > 0" class="goldResult"
         [style.background-image]="'url(./assets/img/result-bg.png)'"
    >
        <div class="r-shadow">
            <div class="r-container">
                <img class="r-top" src="./assets/img/r-top.png">
                <p class="r-title">游戏排名</p>
                <div class="r-content">
                    <div *ngFor="let data of goldResult">
                        <img
                            [src]="data.g_name === '第一队'?'./assets/img/r-1.png':data.g_name === '第二队'?'./assets/img/r-2.png':'./assets/img/r-3.png'">
                        <div class="bar bar-2"
                             [style.height.px]="data.gdkstate === 1 ? data.money_g / 100 : 0"
                             [class]="data.g_name === '第一队'?'bar bar-1':data.g_name === '第二队'?'bar bar-2':'bar bar-3'"
                        >
                            {{data.g_name}}
                        </div>
                    </div>
                </div>
                <div class="r-bottom" style="padding-bottom: 20px">
                    <div *ngFor="let data of goldResult">
                        {{data.gdkstate === 1 ? data.money_g : '0'}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div *ngIf="pickList.length > 0" class="pick">
        <div *ngFor="let data of pickList" [class.picked]="data.picked">
            <div class="img"
                 [appAutobg]="data.ImagePath ? this.http.IP_PORT + data.ImagePath : './assets/img/default-img.png'"
                 [pick]="true">
            </div>
            <p>{{ data.UserName }}</p>
        </div>
    </div>
    <div [style.display] = "devoteShow?'flex':'none'" class="devote">
        <!--<div *ngFor="let item of devote">-->
            <!--{{item.name}}:-->
            <!--<p>{{item.answer}}</p>-->
        <!--</div>-->
        <div #charts class="echartsBox" [style.width.px]="projectParmas.width - 40" style="height: 400px" ></div>
    </div>
</div>
